<template>
  <section>
    <drag-div>
      <div slot="left" class="m">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          clearable
        ></el-input>
        <cm-scroll>
          <el-tree
            :data="myColumnList"
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            :highlight-current="showTree"
            :default-expanded-keys="defaultExpandKeys"
            :style="maxHeight"
            @node-click="handleNodeClick"
            :expand-on-click-node="false">
          </el-tree>
        </cm-scroll>

      </div>
      <div slot="right" class="m">
      <el-col :span="24">
          <el-col :span="24" class="mb20">
            <el-col :span="24">
              <div
                class="table_content"
                style="margin-bottom: 1px"
              >
                <el-row :gutter="4">
                  <el-form
                    label-position="left"
                    :model="searchDto"
                    :inline="true"
                    ref="searchForm"
                    label-width="100px"
                  >
<!--                    <el-form-item label="文章栏目" prop="articleType">-->
<!--                      <TreeSelect-->
<!--                        style="width: 100%;"-->
<!--                        :placeholder="tree.placeholder"-->
<!--                        :accordion="tree.accordion"-->
<!--                        :clearable="tree.clearable"-->
<!--                        :options="cities"-->
<!--                        :value="searchDto.categoryId"-->
<!--                        :props="tree.props"-->
<!--                        @getValue="setCategoryId($event)"-->
<!--                      ></TreeSelect>-->
<!--                    </el-form-item>-->
                    <el-form-item
                      label="文章标题"
                      prop="basicTitle"
                    >
                      <el-input
                        v-model="searchDto.basicTitle"
                        placeholder="请输入文章标题"
                      />
                    </el-form-item>
                  </el-form>
                </el-row>
              </div>
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-check"
                  @click="auditPass"
                  size="small"
                  v-has="{ class: 'bscn' }"
                >采纳
                </el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-close"
                  @click="auditFailed()"
                  size="small"
                  v-has="{ class: 'bsjj' }"
                >拒绝
                </el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="small"
                  @click="search()"
                >查询
                </el-button
                >
                <el-button
                  type="primary"
                  @click="reset()"
                  size="small"
                  icon="el-icon-remove"
                >重置
                </el-button
                >
              </div>
              <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                <el-tab-pane label="待采纳" name="wait">
                </el-tab-pane>
                <el-tab-pane label="已采纳" name="accept"></el-tab-pane>
                <el-tab-pane label="已拒绝" name="reject"></el-tab-pane>
              </el-tabs>
              <page-table :page-data="articleList" :do-get-page-data="getArticleList" :loading="loading"
                          :select-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55"
                ></el-table-column>
                <el-table-column
                  prop="basicId"
                  label="文章编号"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="basicTitle"
                  label="文章标题"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <a class="article_title_a" @click="articleEdit(scope.row)">{{scope.row.basicTitle}}</a>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="categoryTitle"
                  label="栏目名"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="deptName"
                  label="发布单位"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="dataValue"
                  label="审核状态"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span :class="statusStyle(scope.row)">{{scope.row.dataValue|keyText('BSZT')}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="reportAt"
                  label="上报时间"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <!--tool-->
                <el-table-column
                  label="管理"
                  width="100"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
<!--                    <el-tooltip content="编辑" placement="top">-->
<!--                      <el-button-->
<!--                        size="mini"-->
<!--                        icon="el-icon-edit"-->
<!--                        @click="articleEdit(scope.row)"-->
<!--                      ></el-button>-->
<!--                    </el-tooltip>-->

                    <el-tooltip content="删除" placement="top">
                      <el-button
                        size="mini"
                        icon="el-icon-delete"
                        @click="delArticle(scope.row)"
                      ></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </page-table>
            </el-col>
          </el-col>
      </el-col>
      </div>
    </drag-div>
    <el-dialog class="report_dialog" append-to-body fullscreen :visible.sync="editDialogVisible"
               v-if="editDialogVisible" destroy-on-close>
      <article-editor @close="onEditorArticleClose" :is-close="editDialogVisible" :article-id="curArticleId"
                      :column-id="curColumnId"></article-editor>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters} from "vuex";
  import Status from '@/libs/status'
  import _ from 'lodash'
  import ArticleEditor from "./ArticleEditor";


  export default {
    name: "essay",
    created() {
    },
    mounted() {
      this.getArticleList()
      this.getColumnTree()
    },
    data() {
      return {
        tree: {
          placeholder: "模糊搜索",
          props: {
            value: "id", // ID字段名
            label: "label", // 显示名称
            children: "children" // 子级字段名
          },
          accordion: true,
          clearable: true
        },
        pageHeight: window.innerHeight,
        showTree: true,
        curArticleId: 0,
        curColumnId: 0,
        editDialogVisible: false,
        activeName: 'wait',
        loading: false,
        filterText: "",
        defaultProps: {
          children: "children",
          label: "label"
        },
        firstResId: 1,
        searchDto: {
          status: "REPORT_ADOPT_B",
          categoryId: 0,//栏目
          basicTitle: "",//文章标题
          pageNumber: 1,
          pageSize: 10
        },
        articleList: {},
        multipleSelection: []
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    computed: {
      ...mapGetters({
        myColumnList: "myColumnList"
      }),
      maxHeight() {
        return {height: (this.pageHeight - 200) + "px"};
      },
      defaultExpandKeys() {
        let tem = []
        if (this.myColumnList !== null && this.myColumnList.length > 0) {
          this.myColumnList.map((item) => {
            tem.push(item.id)
            if (item.children) {
              item.children.map((child) => {
                tem.push(child.id)
              })
            }
          })

        }
        return tem
      }
    },
    methods: {
      // 检查编辑界面是否关闭
      checkEditorClose() {
        let code = setInterval(() => {
          let refresh = window.localStorage.getItem("refresh")
          if (refresh === '666') {
            window.localStorage.setItem("refresh", "777")
            clearInterval(code)
            this.search()
          }
        }, 2000)
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 栏目点击事件
      handleNodeClick(val) {
        this.searchDto.categoryId = val.id;
        this.getArticleList()
      },
      setCategoryId(val) {
        this.searchDto.categoryId = val;
      },
      onEditorArticleClose() {
        this.editDialogVisible = false
        this.search()
      },
      // 状态颜色设置
      statusStyle(row) {
        let cls = ""
        switch (row.dataValue) {
          case "REPORT_ADOPT_B":
            cls = 'status_new'
            break
          case "REPORT_AUDIT_B":
            cls = 'status_audit'
            break
          case "REPORT_REFUSE_B":
            cls = 'status_reject'
            break
        }
        return cls
      },
      handleClick(tab, event) {
        let status = 'REPORT_ADOPT_B'
        switch (tab.paneName) {
          case 'wait':
            status = 'REPORT_ADOPT_B'
            break
          case 'accept':
            status = 'REPORT_AUDIT_B'
            break
          case 'reject':
            status = 'REPORT_REFUSE_B'
            break
        }
        this.searchDto.status = status
        this.search()
      },
      //文章列表
      getArticleList(search) {
        this.loading = true
        let data = Object.assign(this.searchDto, search)
        this.API.reportListUsingPOST({searchDto: data}).then(res => {
          console.log(res.data)
          this.articleList = res.data ? res.data : {}
          this.loading = false
        })
      },
      //获取多选文章id
      handleSelectionChange(val) {
        this.multipleSelection = [];
        for (let i = 0; i < val.length; i++) {
          if (this.multipleSelection.indexOf(val[i].basicId) === -1) {
            this.multipleSelection.push(val[i].basicId);
          }
        }
      },
      //审核通过
      async auditPass() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            showClose: true,
            message: "请至少选择一篇文章",
            type: "error"
          });
          return;
        }
        let confirm = await this.confirmForm('是否确认采纳')
        if (confirm === 'cancel') return
        var tem = []
        this.multipleSelection.map((item) => {
          tem.push({
            articleCate: "PUSH_SEND",
            articleID: item
          })
        })
        this.$store.dispatch("acceptArticleUsingPOSTS", {statusListDto: tem}).then(ret => {
          this.search()
          this.success('操作成功')
        })
      },
      //审核未通过
      async auditFailed() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            showClose: true,
            message: "请至少选择一篇文章",
            type: "error"
          });
          return;
        }
        let confirm = await this.confirmForm('是否确认拒绝')
        if (confirm === 'cancel') return
        var tem = []
        this.multipleSelection.map((item) => {
          tem.push({
            articleCate: "PUSH_SEND",
            basicId: item
          })
        })
        this.$store.dispatch("acceptRejectArticleUsingPOSTS", {reportDtoList: tem}).then(ret => {
          this.search()
          this.success('操作成功')
        })
      },
      //编辑
      articleEdit(row) {
        window.open('/editor.html#/?articleID='+row.basicId,'_blank')
        this.checkEditorClose();
        // this.curArticleId = row.basicId
        // this.editDialogVisible = true
      },
      //删除
      async delArticle(row) {
        let confirm = await this.confirmForm('是否确认删除该数据')
        if (confirm === 'cancel') return
        let data = {reports: [row.id]}
        this.API.deleteReportUsingPOST(data).then(res => {
          this.search()
          this.success('删除成功')
        })
      },
      //  获取栏目列表
      getColumnTree() {
        this.$store.dispatch("getMyColumnList").then(ret => {

        });
      },

      //查询
      search() {
        this.getArticleList()
      },
      //重置
      reset() {
        this.$refs.searchForm.resetFields()
      }
    },
    components: {
      ArticleEditor
    }
  }
</script>

<style scoped lang="less">
  /deep/ .el-tabs__header {
    margin: 15px 0px -16px !important;
  }

</style>
